import React, { useEffect } from 'react';
import type { FormProps } from 'antd';
import { Button, Radio, Form, Input, Select, Divider, message } from 'antd';
import { useIntl, setLocale } from '@umijs/max';
import ZH from "../../images/ZH.png"
import US from "../../images/US.png"
const formContainerStyle: React.CSSProperties = {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  minHeight: '100vh',
  color: 'white',
  background: `
    
    url('https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80')
  `,
  backgroundSize: 'cover', // 自动缩放填充容器
  backgroundPosition: 'center', // 图片居中显示
  backgroundRepeat: 'no-repeat', // 防止平铺重复
  backgroundAttachment: 'fixed', // 可选：固定背景（视差效果）
};


interface Props { 
  setIsRegister: (Event: boolean) => void;
}
const Register: React.FC<Props> = ({setIsRegister}) => {
  const intl = useIntl();

  const [form] = Form.useForm();
  const onFinish: FormProps['onFinish'] = (values) => {
    console.log('Success:', values);
       message.success(intl.formatMessage({ id: 'pages.login.Registration' }));
    setIsRegister(false)
  };

  const onFinishFailed: FormProps['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  const onChange = (value: string) => {
    console.log('change', value);
    form.setFieldValue('language', value);
    setLocale(value, false);
    localStorage.setItem('umi_locale', value);
  };

  let func = async () => {
    let res = await window.electronAPI.setIPAdress(
      'SET_IP.txt', // 目标文件
      'REACT_APP_IP_ADDRESS', // 要修改的键
      '192.168.0.154:8000',
    );

    console.log(res);
  };

  useEffect(() => {
    let res = localStorage.getItem('umi_locale');
    console.log(res);
    form.setFieldValue('language', res ? res : 'zh-CN');
  }, []);

  return (
    <div style={formContainerStyle}>
      <div
        style={{
          backgroundColor: '#fff',
          padding: '0  5vw 6vh 0',
          borderRadius: '10px',
          boxShadow: '0 0 10px rgba(0, 0, 0, 0.5)',
          opacity: '0.95',
        }}
      >
        <Divider style={{ margin: '7vh 0', fontSize: 18 }}>
          {intl.formatMessage({ id: 'pages.login.information' })}
        </Divider>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ minWidth: 450 }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          form={form}
        >
          <Form.Item
            label={intl.formatMessage({ id: 'pages.login.language' })}
            name="language"
            rules={[{ required: true, message: 'Please input your language!' }]}
            initialValue={'zh-CN'}
          >
            <Radio.Group onChange={(e) => onChange(e.target.value)}>
              <Radio value="zh-CN"> 
                <img style={{width:40,height:25,borderRadius:1}} src={ZH} alt=""  />

                &nbsp;
                简体中文
                 </Radio>
              <Radio value="en-US"> 
                  <img style={{width:40,height:25,borderRadius:1}} src={US} alt=""  />
                  &nbsp;
                English 
                </Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item
            label={intl.formatMessage({ id: 'pages.login.Hotel Name' })}
            name="Name"
            rules={[{ required: true, message: 'Please input your Hotel Name!' }]}
          >
            <Input />
          </Form.Item>

          {/* <Form.Item
            label={intl.formatMessage({ id: 'pages.login.IP' })}
            name="IP"
            rules={[{ required: true, message: 'Please input your IP Address!' }]}
          >
            <Input />
          </Form.Item> */}

          <Form.Item
            label={intl.formatMessage({ id: 'pages.login.Login account' })}
            name="account"
            rules={[{ required: true, message: 'Please input your Login account!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label={intl.formatMessage({ id: 'pages.login.Login.password' })}
            name="password"
            rules={[
              {
                required: true,
                message: 'Please input your password!',
              },
              {
                min: 6,
                message: 'Password must be at least 6 characters!',
              },
            ]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item
            label={intl.formatMessage({ id: 'pages.login.Confirm' })}
            name="Confirm_password"
            rules={[
              {
                required: true,
                message: 'Please confirm your password!',
              },
              ({ getFieldValue }) => ({
                // 通过函数获取其他字段值
                validator(_, value) {
                  if (!value || getFieldValue('password') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('The two passwords do not match!'));
                },
              }),
            ]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              {intl.formatMessage({ id: 'pages.login.Submit' })}
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Register;
